<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>图片切换</title>
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
    .box{
        width: 210px;
        height: 520px;
        margin: 50px auto;
        background-color: #aaa;
        position: relative;
    }
    ul{
        margin: 5px;
        padding: 0;
        list-style: none;
        position: relative;
        top: 10px;
        overflow: hidden;  
        /* border: 1px solid red; */
    }
    li{
        width: 400px;
        height: 160px;
        display: flex;
        position: relative;
        left: 0px;
        background-color: white;
    }
    li img{
        padding: 10px;
    }
    li div{
        position: absolute;
    }
    .message{
        position: absolute;
        width: 200px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        bottom: 0;
        background-color: lightblue;
    }
    .message2{
        position: absolute;
        width: 200px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        bottom: -35px;
        background-color: lightpink;
    }
    </style>
</head>

<body>
    <div class="box">
        <ul><li><img src="./img/1_1.jpg" alt=""><img src="./img/1_2.jpg" alt=""></li>
            <div class="message">111</div>
            <div class="message2">2222</div>
        </ul>
        <ul><li><img src="./img/2_1.jpg" alt=""><img src="./img/2_2.jpg" alt=""></li>
            <div class="message">111</div>
            <div class="message2">2222</div>
        </ul>
        <ul><li><img src="./img/3_1.jpg" alt=""><img src="./img/3_2.jpg" alt=""></li>
            <div class="message">111</div>
            <div class="message2">222</div>
        </ul>
    </div>
    <script src="./js/jquery.js"></script>
</body>

</html>
<script>
    $('ul').hover(function(){
        $(this).find('li').stop().animate({left:-200},200);
        $('.message').eq($(this).index()).stop().animate({bottom:-35},200);
        $('.message2').eq($(this).index()).stop().animate({bottom:0},200);
    },function(){
        $(this).find('li').stop().animate({left:0},200);
        $('.message').eq($(this).index()).stop().animate({bottom:0},200);
        $('.message2').eq($(this).index()).stop().animate({bottom:-35},200);
    });
</script>